<template>
  <a-carousel autoplay>
    <a-image :width="'100%'" :height="500" v-for="(item,index) in banners" :key="index" :src="item" />
  </a-carousel>
  <section class="course-list-section">
    <div class="container">
      <div class="text-line">
        <h5>
          <span>公开课程</span>
          <div class="line"></div>
        </h5>
        <div class="subtitle">软件工程/测试/大数据/人工智能/软考</div>
      </div>
      <a-row :gutter="[20,30]">
        <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="6" v-for="(course,index) in courseList" :key="index">
          <a-card hoverable style="width: 100%;">
            <template #cover>
              <img :src="course.cover" alt="example">
            </template>
            <a-card-meta :title="course.name" :description="course.openingTime"></a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <div class="container">
      <div class="text-line">
        <h5>
          <span>认证课程</span>
          <div class="line"></div>
        </h5>
        <div class="subtitle">软件工程/测试/大数据/人工智能/软考</div>
      </div>
      <a-row :gutter="[20,30]">
        <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="6" v-for="(course,index) in courseList1" :key="index">
          <a-card hoverable style="width: 100%;">
            <template #cover>
              <img :src="course.cover" alt="example">
            </template>
            <a-card-meta :title="course.name" :description="course.openingTime"></a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </section>
  <section class="course-list-section">
    <div class="container teacher-container">
      <div class="text-line">
        <h5>
          <span>推荐教师</span>
          <div class="line"></div>
        </h5>
        <div class="subtitle">名师汇集，保证教学质量与学习效果。</div>
      </div>
      <a-row :gutter="[20,30]">
        <a-col :xs="2" :sm="4" :md="6" :lg="8" :xl="6" v-for="(course,index) in teachers" :key="index">
          <a-card hoverable style="width: 100%;">
            <div class="teacher-item">
              <div class="teacher-top">
                <img class="avatar-lg"
                     :src="course.icon"
                     alt="">
                <div class="title">{{course.userName}}</div>
              </div>
              <div class="teacher-bottom">
                {{course.tags}}
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </section>

</template>
<script setup lang="ts">
import { curriculumList, users } from "@/api";
import { onMounted, reactive } from "vue";

const banners: string[] = ["https://www.bupt.edu.cn/images/22/2023.02.22gg.jpg",
  "https://www.bupt.edu.cn/images/22/2023.02.12.jpg",
  "https://www.bupt.edu.cn/images/22/10.23.jpg",
  "https://www.bupt.edu.cn/images/22/2023.01.20x.jpg",
  "https://www.bupt.edu.cn/images/22/2022.12.31.jpg"];
let courseList = reactive([]) as any;
let courseList1 = reactive([]) as any;
let teachers = reactive([]) as any;

/**
 * 获取课程
 */
function getCurriculumList() {
  curriculumList().then(res => {
    console.log("getCurriculumList", res);
    const data = res.data;
    if (data) {
      data.forEach((item: any) => {
        if (item.type == 0 && courseList.length < 8) {
          courseList.push(item);
        }
        if (item.type == 1 && courseList1.length < 8) {
          courseList1.push(item);
        }
      });
    }
  });
}

/**
 * 获取讲师
 */
function getTeachers() {
  users().then(res => {
    console.log("教师", res);
    const data = res.data;
    if (data) {
      data.forEach((item: any) => {
        if (item.role == 0 && teachers.length < 8) {
          teachers.push(item);
        }

      });
    }
  });
}

onMounted(() => {
  getCurriculumList();
  getTeachers();
});
</script>
<style scoped lang="less">
.course-list-section {
  position: relative;
  padding-bottom: 20px;
  background: #fff;
}

.container {
  width: 1160px;
  margin-right: auto;
  margin-left: auto;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-line {
  position: relative;
  padding: 50px 0;
  text-align: center;

  h5 {
    position: relative;
    margin-bottom: 20px;
    font-size: 32px;
    z-index: 1;
    color: #333;
  }
}

.line {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #e1e1e1;
  margin-top: -1px;
  z-index: -1;
}

.subtitle {
  font-size: 16px;
  color: #999;
}

.more-course-button {
  margin-right: auto;
  margin-left: auto;
  margin-top: 30px;
  float: right;
}

.teacher-container {
  /deep/ .ant-card-body {
    padding: 0;
  }

  .teacher-item {
    text-align: center;

    .teacher-top {
      position: relative;
      z-index: 1;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      background-color: #f5f8fa;
      padding: 20px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;

      .avatar-lg {
        width: 60%;
        height: 60%;
        border-radius: 50%;
        border: 4px solid #fff;
      }

      .title {
        color: #333333;
      }

      .subtitle {
        color: #c1c1c1;
        font-size: 14px;
      }
    }

    .teacher-bottom {
      position: relative;
      height: 90px;
      line-height: 25px;
      box-sizing: border-box;
      padding: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
